<template>
  <div class="toast" v-show="isShow">
    {{message}}
  </div>
</template>

<script>
	export default {
		name: "Toast",
    data() {
			return {
				message: '',    // 提示信息
        isShow: false   // 是否显示
      }
    },
    methods: {
			/**
       *  控制 toast 是否显示, 在外部可以这样调用
       *    this.$toast.show('xxx', 1000);
			 * @param message
			 * @param durition  es6 语法设置参数默认值
			 */
			show(message = '信息', durition = 2000) {
        this.isShow = true;
        this.message = message;
        // 定时关闭
        setTimeout(() => {
        	this.isShow = false;
        	this.message = '';
        }, durition);

      }
    }
	}
</script>

<style scoped>

  .toast {
    padding: 8px 10px;
    color: #fff;
    background-color: rgba(0, 0, 0, .75);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 3px;
  }

</style>